<template>
  <public-dialog
      :title="'同步'"
      :width="'40%'"
      :confirmButtonTitle="'确认'"
      v-model:visible="visible"
      @onConfirm="onConfirm"
  >
    <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="150px">
        <el-form-item label="项目" prop="projectId" v-if="isDark===2">
            <el-select filterable v-model="form.projectId" @change="projectChange">
                <el-option v-for="(item,index) in state.projectList" :key="index" :label="item.projectName" :value="item.projectId"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="项目阶段" prop="projectStageId" v-if="isDark===2">
            <el-cascader ref="cascaderRef" @change="cascaderChange" :disabled="form.projectId===''" v-model="form.projectStageId" :options="state.options" :props="props" clearable />
        </el-form-item>
        <el-form-item label="任务计划时间" prop="taskTime">
            <el-date-picker
                    v-model="form.taskTime"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    value-format="YYYY-MM-DD HH:mm:ss"
            />
        </el-form-item>
    </el-form>
  </public-dialog>
</template>

<script setup>
import PublicDialog from "@/components/PublicDialog.vue";
import {reactive, ref} from "vue";
import {darkLine, projectTask} from "@/api/project";
import {ElForm, ElFormItem, ElSelect, ElOption, ElCascader, ElDatePicker, ElMessage} from "element-plus";
import {resetForm} from "@/common/utils/GlobalUtils";

const visible = ref(false);
const isDark = ref(0);
const form = reactive({
    projectId:'',
    projectStageId:'',
    taskTime:'',
    projectTaskId:'',
});
const rules = reactive({
    projectId: [{ required: true, message: '项目不能为空!', trigger: 'change' }],
    projectStageId: [{ required: true, message: '项目阶段不能为空!', trigger: 'change' }],
    taskTime: [{ required: true, message: '任务计划时间不能为空!', trigger: 'change' }]
});
const state = reactive({
    projectList:[],
    options:[]
});

const props = {
    checkStrictly: true,
    label:'stageName',
    value:'projectStageId',
    children:'children',
}

const formRef = ref(null);
const emits = defineEmits(['onSuccess']);

/**
 * 确认
 */
const onConfirm = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            let prams = {
                ...form,
                startDate: form.taskTime[0],
                endDate: form.taskTime[1],
            };
            if(Array.isArray(prams.projectStageId)){
                prams.projectStageId = prams.projectStageId[0];
            }
            darkLine.transfer(prams).then(res=>{
              if(res.code==='200'){
                  ElMessage.success('操作成功!');
                  visible.value = false;
                  emits('onSuccess');
              }else{
                  ElMessage.error('操作失败!');
                  visible.value = false;
              }
            });
        }
    });
}

/**
 * 获取所有正式项目
 */
const getProjectList = (type = 3) => {
    darkLine.getProjectList({type:type}).then(res=>{
      if(res.code==='200'){
          state.projectList = res.data;
      }
    });
}

/**
 * 获取项目阶段
 */
const getStageDetail = (projectId) => {
    projectTask.getStageDetail(projectId).then(res=>{
        if(res.code==='200'){
            state.options =  res.data.stageVo.stages;
        }
    })
}

/**
 * 项目选择
 * @param e
 */
const projectChange = (e) => {
  if(e){
      getStageDetail(e);
  }
  if(!e){
      form.projectId = '';
      state.options = [];
  }
}

const openPopup = (val,projectTaskId)=>{
    resetForm(form);
    setTimeout(()=>{formRef.value.clearValidate();},0);
    if(val===2){
        getProjectList();
    }
    form.projectTaskId = projectTaskId;
    isDark.value = val;
    visible.value = true;
}

const cascaderRef = ref(null);
/**
 * el-cascader被选中时
 * @param e
 */
const cascaderChange = (e) => {
    if(e){
        cascaderRef.value.togglePopperVisible();
    }
}

defineExpose({openPopup});
</script>

<style lang="scss" scoped>

</style>
